.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  span {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    transform: rotate(45deg);
    animation: antRotate 1.2s infinite linear;
    margin-top: 34px;
    i {
      width: 14px;
      height: 14px;
      border-radius: 100%;
      background-color: $d-color-primary;
      transform: scale(0.75);
      display: block;
      position: absolute;
      opacity: 0.3;
      animation: antSpinMove 1s infinite linear alternate;
      transform-origin: 50% 50%;
      &:first-child {
        left: 0;
        top: 0;
      }
      &:nth-child(2) {
        right: 0;
        top: 0;
        animation-delay: 0.4s;
      }
      &:nth-child(3) {
        right: 0;
        bottom: 0;
        animation-delay: 0.8s;
      }
      &:nth-child(4) {
        left: 0;
        bottom: 0;
        animation-delay: 1.2s;
      }
    }
  }
}

@keyframes antSpinMove {
  to {
    opacity: 1;
  }
}

@keyframes antRotate {
  to {
    transform: rotate(405deg);
  }
}
